<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="top-bar">
            <view v-if="false">
                <view class="cat-list">
                    <scroll-view scrollX="true">
                        <view class="list-content">
                            <view @tap="allClick" class="cat-item">
                                <text class="flex-y-center">全部</text>
                            </view>
                            <view @tap="catClick" :class="['cat-item', item.checked?'active':'']" :data-index="index" v-for="(item,index) in data.cat_list" :key="item.id">
                                <text class="flex-y-center">{{item.name}}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="sub-cat-list" v-if="item.checked&&item.list.length>0" v-for="(item,parentIndex) in data.cat_list" :key="item.id">
                    <scroll-view scrollX="true">
                        <view class="list-content">
                            <view @tap="subCatClick" :class="['cat-item', items.checked?'active':'']" :data-index="index" :data-parent-index="parentIndex" v-for="(items,index) in items.list" :key="items.id">
                                <text class="flex-y-center">{{items.name}}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="flex-row sort-bar">
                <view @tap="sortClick" :class="['flex-grow-1 flex-x-center flex-y-center sort-item', data.sort==0?'active':'']" data-sort="0">综合
                </view>
                <view @tap="sortClick" :class="['flex-grow-1 flex-x-center flex-y-center sort-item', data.sort==1?'active':'']" data-sort="1">最新
                </view>
                <view @tap="sortClick" :class="['flex-grow-1 flex-x-center flex-row sort-item', data.sort==2?'active':'']" data-default_sort_type="0" data-sort="2">
                    <view class="flex-y-center">价格</view>
                    <view class="flex-y-center sort-icon-box">
                        <view>
                            <view>
                                <image class="sort-icon-up" :src="data.__wxapp_img.sort.up.url+'-active.png'" v-if="data.sort==2&&data.sort_type==0"></image>
                                <image class="sort-icon-up" :src="data.__wxapp_img.sort.up.url+'.png'" v-else></image>
                            </view>
                            <view>
                                <image class="sort-icon-up" :src="data.__wxapp_img.sort.down_active.url" v-if="data.sort==2&&data.sort_type==1"></image>
                                <image class="sort-icon-up" :src="data.__wxapp_img.sort.down.url" v-else></image>
                            </view>
                        </view>
                    </view>
                </view>
                <view @tap="sortClick" :class="['flex-grow-1 flex-x-center flex-y-center sort-item', data.sort==3?'active':'']" data-sort="3">销量
                </view>
            </view>
        </view>
        <view class="goods-list">
            <view class="no-data-tip" v-if="data.show_no_data_tip">该类目暂无内容</view>
            <navigator class="goods-item" openType="navigate" :url="'/pages/goods/goods?id='+item.id" v-for="(item,index) in data.goods_list" :key="item.id">
                <image class="goods-pic" mode="aspectFill" :src="item.pic_url"></image>
                <view class="goods-info" style="padding:5upx 20upx;">
                    <text class="mb-10 text-more-2" style="height:2.8em;line-height:1.4;">{{item.name}}</text>
                    <view class="flex-row">
                        <view class="flex-grow-1" style="color:#ff334b">￥{{item.price}}</view>
                        <view class="flex-grow-0 fs-sm" style="color:#999;" v-if="data.__is_sales">已售{{item.sales}}</view>
                    </view>
                </view>
            </navigator>
        </view>
        <view :class="['loading-bar', data.show_loading_bar?'active':'']" style="text-align: center">
            <image :src="data.__wxapp_img.system.loading.url" style="width: 160upx;height: 80upx"></image>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = !1, a = !1;
	export default {
		data() {
			return {
				data: {
        cat_id: "",
        page: 1,
        cat_list: [],
        goods_list: [],
        sort: 0,
        sort_type: -1,
        quick_icon: !0
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t), this.loadData(t);
    },
		onReachBottom: function() {
        myVue.getApp.page.onReachBottom(this), a || this.loadMoreGoodsList();
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
        var a = this;
        if (myVue.getApp.core.getStorageSync(myVue.getApp.const.LIST_PAGE_RELOAD)) {
            var e = myVue.getApp.core.getStorageSync(myVue.getApp.const.LIST_PAGE_OPTIONS);
            myVue.getApp.core.removeStorageSync(myVue.getApp.const.LIST_PAGE_OPTIONS), myVue.getApp.core.removeStorageSync(myVue.getApp.const.LIST_PAGE_RELOAD);
            var i = e.cat_id || "";
            a.setData({
                cat_id: i
            });
            var s = a.data.cat_list;
            for (var o in s) {
                var d = !1;
                for (var r in s[o].list) s[o].list[r].id == i ? (s[o].list[r].checked = !0, d = !0) : s[o].list[r].checked = !1;
                d || i == s[o].id ? (s[o].checked = !0, s[o].list && s[o].list.length > 0 && a.setData({
                    height_bar: "height-bar"
                })) : s[o].checked = !1;
            }
            a.setData({
                cat_list: s
            }), a.reloadGoodsList();
        }
    },
		onShareAppMessage: function(t) {
        return myVue.getApp.page.onShareAppMessage(this), {
            path: "/pages/list/list?user_id=" + myVue.getApp.getUser().id + "&cat_id=" + this.data.cat_id,
            success: function(t) {}
        };
    },
		methods: {
			loadData: function(t) {
        var a = this, e = myVue.getApp.core.getStorageSync(myVue.getApp.const.CAT_LIST), i = "";
        if (t.cat_id) for (var s in e) {
            var o = !1;
            e[s].id == t.cat_id && (e[s].checked = !0, e[s].list.length > 0 && (i = "height-bar"));
            for (var d in e[s].list) e[s].list[d].id == t.cat_id && (e[s].list[d].checked = !0, 
            o = !0, i = "height-bar");
            o && (e[s].checked = !0);
        }
        if (t.goods_id) var r = t.goods_id;
        a.setData({
            cat_list: e,
            cat_id: t.cat_id || "",
            height_bar: i,
            goods_id: r || ""
        }), a.reloadGoodsList();
    },
    catClick: function(t) {
        var a = this, e = "", i = t.currentTarget.dataset.index, s = a.data.cat_list;
        for (var o in s) {
            for (var d in s[o].list) s[o].list[d].checked = !1;
            o == i ? (s[o].checked = !0, e = s[o].id) : s[o].checked = !1;
        }
        var r = "";
        s[i].list.length > 0 && (r = "height-bar"), a.setData({
            cat_list: s,
            cat_id: e,
            height_bar: r
        }), a.reloadGoodsList();
    },
    quickNavigation: function() {
        this.setData({
            quick_icon: !this.data.quick_icon
        });
        this.data.dapp;
				//#ifndef H5
        var t = myVue.getApp.core.createAnimation({
            duration: 300,
            timingFunction: "ease-out"
        });
        this.data.quick_icon ? t.opacity(0).step() : t.translateY(-55).opacity(1).step(), 
        this.setData({
            animationPlus: t.export()
        });
				//#endif
    },
    subCatClick: function(t) {
        var a = this, e = "", i = t.currentTarget.dataset.index, s = t.currentTarget.dataset.parentIndex, o = a.data.cat_list;
        for (var d in o) for (var r in o[d].list) d == s && r == i ? (o[d].list[r].checked = !0, 
        e = o[d].list[r].id) : o[d].list[r].checked = !1;
        a.setData({
            cat_list: o,
            cat_id: e
        }), a.reloadGoodsList();
    },
    allClick: function() {
        var t = this, a = t.data.cat_list;
        for (var e in a) {
            for (var i in a[e].list) a[e].list[i].checked = !1;
            a[e].checked = !1;
        }
        t.setData({
            cat_list: a,
            cat_id: "",
            height_bar: ""
        }), t.reloadGoodsList();
    },
    reloadGoodsList: function() {
        var t = this;
        a = !1, t.setData({
            page: 1,
            goods_list: [],
            show_no_data_tip: !1
        });
        var e = t.data.cat_id || "", i = t.data.page || 1;
        myVue.getApp.request({
            url: myVue.getApp.api.default.goods_list,
            data: {
                cat_id: e,
                page: i,
                sort: t.data.sort,
                sort_type: t.data.sort_type,
                goods_id: t.data.goods_id
            },
            success: function(e) {
                0 == e.code && (0 == e.data.list.length && (a = !0), t.setData({
                    page: i + 1
                }), t.setData({
                    goods_list: e.data.list
                })), t.setData({
                    show_no_data_tip: 0 == t.data.goods_list.length
                });
            },
            complete: function() {}
        });
    },
    loadMoreGoodsList: function() {
        var e = this;
        if (!t) {
            e.setData({
                show_loading_bar: !0
            }), t = !0;
            var i = e.data.cat_id || "", s = e.data.page || 2, o = e.data.goods_id;
            myVue.getApp.request({
                url: myVue.getApp.api.default.goods_list,
                data: {
                    page: s,
                    cat_id: i,
                    sort: e.data.sort,
                    sort_type: e.data.sort_type,
                    goods_id: o
                },
                success: function(t) {
                    0 == t.data.list.length && (a = !0);
                    var i = e.data.goods_list.concat(t.data.list);
                    e.setData({
                        goods_list: i,
                        page: s + 1
                    });
                },
                complete: function() {
                    t = !1, e.setData({
                        show_loading_bar: !1
                    });
                }
            });
        }
    },
		sortClick: function(t) {
        var a = this, e = t.currentTarget.dataset.sort, i = void 0 == t.currentTarget.dataset.default_sort_type ? -1 : t.currentTarget.dataset.default_sort_type, s = a.data.sort_type;
        if (a.data.sort == e) {
            if (-1 == i) return;
            s = -1 == a.data.sort_type ? i : 0 == s ? 1 : 0;
        } else s = i;
        a.setData({
            sort: e,
            sort_type: s
        }), a.reloadGoodsList();
    },
		},
	}
</script>

<style scoped>
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.top-bar {
    position: fixed;
    top: var(--window-top);
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    background: #fff;
    z-index: 10;
    border-top: 1upx solid #E3E3E3;
}

.cat-list {
    white-space: nowrap;
    border-bottom: 1upx solid #e3e3e3;
    background: #fff;
}

.cat-list .list-content {
    white-space: nowrap;
    height: 100upx;
}

.cat-list .cat-item {
    white-space: nowrap;
    display: inline-block;
    padding: 0 40upx;
    height: 100%;
}

.cat-list .cat-item text {
    white-space: nowrap;
    border-bottom: 5upx solid transparent;
    height: 100%;
    transform: translateY(1upx);
}

.cat-list .cat-item.active text {
    color: #ff4544;
    border-bottom-color: #ff4544;
}

.sub-cat-list {
    white-space: nowrap;
    border-bottom: 1upx solid #e3e3e3;
    background: #fff;
}

.sub-cat-list scroll-view {
    height: 100upx;
}

.sub-cat-list .list-content {
    white-space: nowrap;
    height: 100upx;
    padding: 0 20upx;
}

.sub-cat-list .cat-item {
    display: inline-block;
    height: 60upx;
    padding: 0 20upx;
    border: 1upx solid #ff4544;
    margin: 20upx;
    color: #ff4544;
    border-radius: 5upx;
}

.sub-cat-list .cat-item text {
    height: 100%;
}

.sub-cat-list .cat-item.active {
    background: #ff4544;
    color: #fff;
}

.top-bar~.goods-list {
    padding-top: 106upx;
}

.top-bar.height-bar~.goods-list {
    padding-top: 206upx;
}

.goods-item {
    width: 365upx;
    display: inline-block;
    position: relative;
    margin: 0 5upx;
    margin-bottom: 10upx;
    background: #fff;
}

.goods-item .goods-pic {
    width: 100%;
    height: 365upx;
}

.goods-item .goods-info {
    padding: 5upx 0;
}

.goods-item .goods-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 10upx;
    display: block;
    text-align: center;
}

.goods-item .goods-price {
    color: #f40;
    display: block;
    text-align: center;
}

.loading-bar {
    visibility: hidden;
}

.loading-bar.active {
    visibility: visible;
}

.sort-bar {
    height: 100upx;
}

.sort-item.active {
    color: #ff4544;
}

.sort-item .sort-icon-box {
    margin-left: 15upx;
}

.sort-item .sort-icon-up,.sort-item .sort-icon-down {
    width: 20upx;
    height: 12upx;
    display: block;
}

.sort-item .sort-icon-up {
    margin-bottom: 5upx;
}
</style>
